<template>
	<view>
		<!-- 头部  -->
		<addr-search></addr-search>
		<!--tab栏 -->
		<index-tab :Tabindex="Tabindex" @changeIndexTap="changeIndexTap"></index-tab>
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper indicator-dots="true" autoplay="true" :interval="3000" :duration="500" indicator-active-color="#0099CC">
				<swiper-item v-for="item in imgList" :key="item">
					<image :src="item" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 推荐 -->
		<view class="tj">
			<navigator url="/pages/topList/index" hover-class="navigator-hover">
				<view class="uni-icon color1">&#xe6b1;</view>
				<view class="title ">人气榜</view>
			</navigator>
			<navigator url="/pages/like/index" hover-class="navigator-hover">
				<view class="uni-icon color2">&#xe656;</view>
				<view class="title ">活动日历</view>
			</navigator>
			<navigator url="/pages/like/index" hover-class="navigator-hover">
				<view class="uni-icon color3">&#xe601;</view>
				<view class="title ">收藏</view>
			</navigator>
		</view>
		<view class="h10"></view>
		<!-- 推荐1 -->
		<recommend :activityList="activityList"></recommend>
		<!-- 猜你喜欢 -->
		<view class="h10"></view>
		<youLike :activityList="activityList"></youLike>
	</view>
</template>

<script>
	import AddrSearch from '../../components/addr_search.vue'
	import Recommend from '../../components/recommend.vue'
	import YouLike from '../../components/you_like.vue'
	import IndexTab from './components/tab.vue'
	export default {
		name: 'index',
		data: function () {
			return {
				Tabindex: 0, // 
				imgList: [ // 轮播图片
					'../../static/1.jpg',
				],
				activityList: [{
						id: '1',
						name: '2018 中国福建互联网大会暨智慧城市高峰论坛',
						addr: '福建厦门',
						date: '09/8 周一',
						img: '../../static/1.jpg',
						money: 456
					},
					{
						id: '1',
						name: '2018 中国福建互联网大会暨智慧城市高峰论坛',
						addr: '福建厦门',
						date: '09/8 周一',
						img: '../../static/1.jpg',
						money: 123
					},
					{
						id: '1',
						name: '2018 中国福建互联网大会暨智慧城市高峰论坛',
						addr: '福建厦门',
						date: '09/8 周一',
						img: '../../static/1.jpg',
						money: 333
					},
					{
						id: '1',
						name: '2018 中国福建互联网大会',
						addr: '福建厦门',
						date: '09/8 周一',
						img: '../../static/1.jpg',
						money: 10
					},
				]
			}
		},
		methods: {
			// 监听tap变化 从0开始
			changeIndexTap(i) {
				this.Tabindex = i
			}
		},
		components: {
			AddrSearch,
			IndexTab,
			Recommend,
			YouLike
		},
	}
</script>

<style scoped>
	.h10 {
		height: 15px;
	}

	.swiper {
		background: #fff;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	.tj {
		display: flex;
		box-sizing: border-box;
		background: #FFFFFF;
		width: 100%;
	}

	.tj navigator {
		padding: 50px 40px;
		flex: 1;
		text-align: center;
	}

	.tj navigator .title {
		margin-top: 18px;
		font-size: 25px;
	}

	.color1 {
		color: #FF6600;
	}

	.color2 {
		color: #0099CC;
	}

	.color3 {
		color: #FF0033;
	}
</style>
